<template>
  <div id="teamwork">
    <div class="teamworkContent">
      <!-- 师徒制工作室 -->
      <div class="teamworkContentMentoring">
        <div class="teamworkContentMentoringTitle">
          <h2>师徒制工作室</h2>
          <span class="fr" @click="jumpTo('/stylistInfoList?sceneType=teacherList')">查看更多</span>
        </div>
        <div class="teamworkContentMentoringList">
          <div class="teamworkContentMentoringListTeacher">
            <ul>
              <li v-for="(item, index) in mentoringData" :key="index" @click="jumpTo('/stylistInfo?sceneType=teacher&studioId=' + item.id)">
                <img class="mentoringListImage" :src="$globalImageUrl + item.studioLogo" alt="">
                <div class="mentoringListInfo">
                  <h3 class="ellipse">{{item.studioName}}</h3>
                  <p class="ellipse"><img :src="$globalImageUrl + item.studioLogo" alt="">{{item.sponsor}} <span>{{item.introduce}}</span></p>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <!-- 创意机构 -->
      <div class="teamworkContentMentoring">
        <div class="teamworkContentMentoringTitle">
          <h2>创意机构</h2>
          <span class="fr" @click="jumpTo('/stylistInfoList?sceneType=enterpriseList')">查看更多</span>
        </div>
        <div class="teamworkContentMentoringList">
          <div class="teamworkContentMentoringListTeacher">
            <ul>
              <li v-for="(item, index) in enterpriseData" :key="index" @click="jumpTo('/stylistInfo?sceneType=enterprise&companyId=' + item.id + '&uId=' + item.userId)">
                <img class="mentoringListImage" :src="$globalImageUrl +item.enterpriseLogo" alt="">
                <div class="mentoringListInfo">
                  <h3 class="ellipse">{{item.companyName}} <span>{{item.introduce}}</span></h3>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <!-- 创业园区 -->
      <div class="teamworkContentMentoring">
        <div class="teamworkContentMentoringTitle">
          <h2>创业园区</h2>
          <span class="fr" @click="jumpTo('/stylistInfoList?sceneType=schoolyard')">查看更多</span>
        </div>
        <div class="teamworkContentMentoringList">
          <swiper ref="mySwiper" :options="swiperOptionsBanner">
            <swiper-slide v-for="(item, index) in schoolData" :key="index">
              <img :src="$globalImageUrl + item.parkLogo" alt="" @click="jumpTo('/schoolyard?parkId=' + item.parkId)">
              <p class="ellipse">{{item.parkName}}</p>
            </swiper-slide>
          </swiper>
        </div>
      </div>
      <!-- 创新创业 -->
      <div class="teamworkContentMentoring">
        <div class="teamworkContentMentoringTitle">
          <h2>创新创业</h2>
          <span class="describe">展现你的创业风采</span>
        </div>
        <div class="teamworkContentMentoringList">
          <div class="teamworkContentMentoringListInnovate">
            <div class="mentoringListInnovateTop">
              <div class="innovateLi innovateLi1" @click="jumpTo('/newsList?sceneType=excellent')">
                <div class="innovateLiText">
                  <p class="innovateLiPaddtop">创新创业项目优品汇</p>
                  <p class="innovateLiSize14 ellipse-two">大咖们的优秀创新</p>
                </div>
                <div class="innovateLiImg">
                  <img src="../../assets/img/teamwork/work1.png" alt="">
                </div>
              </div>
              <div class="innovateLi innovateLi2" @click="jumpTo('/newsList?sceneType=dreamWorks')">
                <div class="innovateLiImg">
                  <img src="../../assets/img/teamwork/work2.png" alt="">
                </div>
                <div class="innovateLiText">
                  <p class="innovateLiPaddtop">创业梦工厂</p>
                  <p class="innovateLiSize14 ellipse">成功创立公司的团队</p>
                </div>
              </div>
              <div class="innovateLi innovateLi3" @click="jumpTo('/newsList?sceneType=angell')">
                <div class="innovateLiImg">
                  <img src="../../assets/img/teamwork/work3.png" alt="">
                </div>
                <div class="innovateLiText">
                  <p class="innovateLiPaddtop">创业天使团</p>
                  <p class="innovateLiSize14">创业融资企业汇总 寻求合作</p>
                </div>
              </div>
            </div>
            <div class="mentoringListInnovateBottom">
              <div class="innovateBox6rem">
                <div class="innovateLi innovateLi4" @click="jumpTo('/newsList?sceneType=tutor')">
                  <div class="innovateLiImg">
                    <img src="../../assets/img/teamwork/work4.png" alt="">
                  </div>
                  <div class="innovateLiText">
                    <p class="innovateLiPaddtop">创业导师</p>
                    <p class="innovateLiSize14">大咖导师团为你保驾护航</p>
                  </div>
                </div>
              </div>
              <div class="innovateBox6rem">
                <div class="innovateLi innovateLi5" @click="jumpTo('/newsList?sceneType=createCourse')">
                  <div class="innovateLiImg">
                    <img src="../../assets/img/teamwork/work5.png" alt="">
                  </div>
                  <div class="innovateLiText">
                    <p class="innovateLiPaddtop">创业课程</p>
                    <p class="innovateLiSize14">创新创业大赛汇总</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 合作单位 -->
      <div class="teamworkContentMentoring">
        <div class="teamworkContentMentoringTitle">
          <h2>合作单位</h2>
        </div>
        <div class="teamworkContentMentoringList">
          <div class="teamworkContentMentoringListJoinHands">
            <ul>
              <li v-for="(item, index) in joinEterprise" :key="index" @click="jumpTo('/stylistInfo?sceneType=enterprise&companyId=' + item.id + '&uId=' + item.userId) ">
                <img :src="$globalImageUrl + item.enterpriseLogo" alt="">
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'

export default {
  name: 'teamwork',
  components: {
    Swiper,
    SwiperSlide
  },
  directives: {
    swiper: directive
  },
  data () {
    return {
      swiperOptionsBanner: {
        pagination: {
          el: '.swiper-pagination'
        },
        slidesPerView: 2,
        spaceBetween: 20,
        centeredSlides: false,
        loop: true,
        autoplay: true,
        preventLinksPropagation: false,
        width: 800
      },
      mentoringData: [],
      enterpriseData: [],
      schoolData: [],
      joinEterprise: []
    }
  },
  computed: {
    swiper () {
      return this.$refs.mySwiper.$swiper
    }
  },
  created () {
    this.fetchStudioList()
    // this.fetchEnterpriseList()
    this.fetchParkList()
    this.fetchSelectEnterprise()
    this.fetchResidentEnter()
  },
  methods: {
    // 获取师徒制工作室列表
    fetchStudioList () {
      this.$api.getStudioList({
      }).then(res => {
        if (res.code === 0) {
          console.log(res)
          this.mentoringData = res.data
          // console.log(res.data)
        }
      })
    },
    // 获取创意机构企业列表--是否推荐
    fetchSelectEnterprise () {
      this.$api.getSelectEnterprise({
      }).then(res => {

        if (res.code === 0) {
          this.enterpriseData = res.data
        }
      })
    },
    // 获取创意机构列表
    // fetchEnterpriseList () {
    //   this.$api.getEnterpriseList({
    //   }).then(res => {
    //     if (res.code === 0) {
    //       this.enterpriseData = res.data
    //       console.log(res.data)
    //     }
    //   })
    // },
    // 获取创业园区列表
    fetchParkList () {
      this.$api.getParkList({
      }).then(res => {
        if (res.code === 0) {
          this.schoolData = res.data
        }
      })
    },
    // 下方合作企业
    fetchResidentEnter () {
      this.$api.getResidentEnter({
      }).then(res => {
        console.log(res)
        if (res.code === 0) {
          this.joinEterprise = res.data
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.swiper-slide {
  position: relative;
  img{
    display: inline-block;
    height: 3.9rem;
    width: 100%;
  }
  p{
    font-size: 0.18rem;
    line-height: 0.32rem;
    font-weight: 500;
    color: rgba(21, 162, 156, 1);
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    padding: 0 .1rem;
  }
}

#teamwork{
  .teamworkContent{
    width: 1200px;
    margin: auto;
    padding: .5rem 0;
    .teamworkContentMentoring{
      padding-bottom: .4rem;
      .teamworkContentMentoringTitle{
        padding-bottom: .2rem;
        h2{
          font-size: 0.24rem;
          line-height: 0.32rem;
          font-weight: 400;
          color: #333;
          display: inline-block;
        }
        span{
          font-size: 0.16rem;
          height: 0.32rem;
          line-height: 0.44rem;
          font-weight: 500;
          color: #666;
          display: inline-block;
        }
        .describe{
          font-size: 0.14rem;
          color: #999999;
          padding-left: .1rem;
        }
      }
      .teamworkContentMentoringList{
        .teamworkContentMentoringListTeacher{
          ul{
            li:nth-child(5n) {
              margin: 0 0 .1rem 0;
            }
            li{
              display: inline-block;
              width: 2.3rem;
              margin: 0 .125rem .125rem 0;
              background-color: #fff;
              img.mentoringListImage{
                width: 2.3rem;
                height: 1.6rem;
                display: inline-block;
              }
              .mentoringListInfo{
                padding: .1rem;
                h3{
                  font-size: 0.14rem;
                  line-height: 0.2rem;
                  font-weight: 500;
                  color: #333;
                }
                span{
                  font-size: 0.12rem;
                  line-height: 0.18rem;
                  font-weight: 500;
                  color: rgba(170, 170, 170, 1);
                  padding: .05rem 0;
                  display: inline-block;
                }
                p{
                  height: 0.22rem;
                  line-height: 0.22rem;
                  font-size: 0.12rem;
                  font-weight: 500;
                  img{
                    display: inline-block;
                    width: 0.22rem;
                    height: 0.22rem;
                    border-radius: 50%;
                    vertical-align: top;
                    margin-right: .07rem;
                  }
                }
              }
            }
          }
        }
        .teamworkContentMentoringListInnovate{
          background-color: #fff;
          .innovateLi{
            width: 33.33%;
            height: 1.6rem;
            display: inline-block;
            vertical-align: middle;
            .innovateLiText{
              width: calc(100% - 1.6rem);
              height: 1.6rem;
              display: inline-block;
              vertical-align: middle;
              p{
                font-size: 0.18rem;
                color: #FFFFFF;
                font-weight: 500;
                line-height: .24rem;
                text-align: center;
              }
              p.innovateLiPaddtop {
                padding-top: .55rem;
              }
              p.innovateLiSize14{
                font-size: 0.14rem;
                color: #FFFFFF;
                font-weight: 500;
                line-height: .2rem;
                padding: 0 .05rem;
                padding-top: .1rem;
              }
            }
            .innovateLiImg{
              width: 1.6rem;
              height: 1.6rem;
              display: inline-block;
              vertical-align: middle;
              img{
                width: 100%;
                height: 100%;
                display: inline-block;
              }
            }
          }
          .innovateLi1{
            .innovateLiText{
              background-color: #00AC7C;
            }
          }
          .innovateLi2{
            .innovateLiText{
              width: 100%;
              height: .8rem;
              background-color: #00B8AB;
              p.innovateLiPaddtop{
                padding-top: .15rem;
              }
            }
            .innovateLiImg{
              width: 100%;
              height: .8rem;
            }
          }
          .innovateLi3{
            .innovateLiText{
              background-color: #00AC7C;
            }
          }
          .innovateBox6rem{
            width: 6rem;
            display: inline-block;
          }
          .innovateLi4{
            .innovateLiText{
              background-color: #00C6F7;
            }
          }
          .innovateLi5{
            .innovateLiText{
              background-color: #0cb824;
            }
          }
          .mentoringListInnovateTop{
            font-size: 0;
            // padding-bottom: .2rem;
          }
          .mentoringListInnovateBottom{
            font-size: 0;
            .innovateLi {
              width: 3rem;
              margin: auto;
              height: auto;
              display: block;
              .innovateLiText{
                width: 3rem;
                height: .8rem;
                p.innovateLiPaddtop {
                  padding-top: .15rem;
                }
              }
              .innovateLiImg{
                width: 3rem;
                height: 2.2rem;
              }
            }
          }
        }
        .teamworkContentMentoringListJoinHands{
          background-color: #fff;
          ul{
            li{
              display: inline-block;
              margin-right: .1142857rem;
              margin-bottom: .1142857rem;
              img{
                display: inline-block;
                width: 1.4rem;
                height: 1.4rem;
              }
            }
            li:nth-child(8n) {
              margin-right: 0;
            }
            li:nth-last-child(-n + 8) {
              margin-bottom: 0;
            }
          }
        }
      }
    }
  }
}
</style>
